<template>
  <div>
      <div id="banner">
        <div class="wrapper swiper-wrapper">
          <a class="swiper-slide" href="#"
            v-for="value in bannerList"
            :key="getKey(value.url)"
          >
              <img :src="value.pic" alt="">
          </a>
          
        </div>
        <div class="swiper-pagination pagination" ></div>
      </div>
  </div>
</template>

<script>
//import "assets/scripts/swiper.min.js"
import Swiper from "swiper"
export default {
  props:['bannerList'],
  mounted(){
    if(this.bannerList){
      new Swiper('#banner',{
        loop:true,
        autoplay:true,
        pagination: {
          el: '.swiper-pagination',
        }
      })
    }
  },
  watch:{
    async bannerList(){
      await this.$nextTick()
      console.log(1)
      new Swiper('#banner',{
        loop:true,
        autoplay:true,
        pagination: {
          el: '.swiper-pagination',
        }
      })
    }
  },
  methods:{
    getKey(key){
      return key+new Date().getTime()+Math.random()
    }
  }
}
</script>

<style lang="stylus">
#banner
  height 1.25rem
  width 100%
  position relative
  overflow hidden
  .wrapper
    width 100%
    height 100%
    >a
      display block
      width 100%
      height 100%
      img
        width 100%
        height 100%
  .pagination
    display block
    position absolute
    left auto
    right 0
    bottom 0
    width 1rem
    height .2rem
    line-height .2rem
    z-index 1
    .swiper-pagination-bullet
      background-color rgba(255,255,255,0.5)
      width .08rem
      height .08rem
      margin 0 .06rem
      transition background-color .5s
      transition-delay .5
      &.swiper-pagination-bullet-active
        background-color #fff
</style>